<!DOCTYPE html>
<html>
<head>
<title>CS 580 Final Project</title>
	<link rel="stylesheet" href="css/style.css">
	<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script -->
	<script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="lib/Engine.js" type="text/javascript"></script>
	<script src="lib/ModelReader.js" type="text/javascript"></script>
	<script src="lib/Vector.js" type="text/javascript"></script>
	<script src="lib/Matrix.js" type="text/javascript"></script>
	<script src="lib/Triangle.js" type="text/javascript"></script>
	<script src="lib/Transform.js" type="text/javascript"></script>
	<script src="lib/Texture.js" type="text/javascript"></script>
	<script src="lib/Shader.js" type="text/javascript"></script>
	<script src="lib/Camera.js" type="text/javascript"></script>
	<script src="lib/Light.js" type="text/javascript"></script>
	<script src="lib/Render.js" type="text/javascript"></script>
	<script src="lib/Canvas.js" type="text/javascript"></script>
	<script src="lib/GameObject.js" type="text/javascript"></script>
	<script src="lib/Scene.js" type="text/javascript"></script>
	<script src="application.js" type="text/javascript"></script>
</head>
<body>
	<h1>CS 580 Final Project</h1>
	<table>
		<tr>
			<td class = "leftView">
				<div class="sceneView" >
					<fieldset>
				    <legend>Scene</legend>
					<select id="gameObjectList" multiple="multiple">
					</select><br/>
					<input type="file" id="modelFile"/>
					<input type="button" id="importModel" value = "Add model"/><br/>
					<input type="button" id="deleteModel" value = "Delete model"/>
					</fieldset>
				</div>
				<div class="camera">
				<fieldset>
			    <legend>Camera</legend>
				<div class="title">Position</div>
				x:<input value = "0" type = "number" class="input" id = "cpx" />
				y:<input value = "0" type = "number" class="input" id = "cpy"/>
				z:<input value = "0" type = "number" class="input" id = "cpz"/>
				<br/>
				<div class="title">Look At</div>
				x:<input value = "0" type = "number" class="input" id = "lax" />
				y:<input value = "0" type = "number" class="input" id = "lay"/>
				z:<input value = "0" type = "number" class="input" id = "laz"/>
				<br/>
				<div class="title">World Up</div>
				x:<input value = "0" type = "number" class="input" id = "wux" />
				y:<input value = "0" type = "number" class="input" id = "wuy"/>
				z:<input value = "0" type = "number" class="input" id = "wuz"/>
				<br/>
				<span class="title">FOV:</span><input value = "0" type = "number" class="input" id = "fov"/>
				<input type="button" id="resetCamera" value = "Reset"/>
				<br/>
				</fieldset>
				</div>
			</td>
			<td><canvas id="main" width="256" height="256" ></canvas>
				<div id= "toon" class = "button" >Toon</div>
				<div id= "refresh" class = "button">Refresh</div>
				<div id= "save" class = "button" >Save</div>
			</td>
			<td class="gameObjectView">
				<div >
				<div class="transform">
				<fieldset>
			    <legend>Transform</legend>
				<div class="title">Position</div>
				x:<input value = "0" type = "number" class="input" id = "px" />
				y:<input value = "0" type = "number" class="input" id = "py"/>
				z:<input value = "0" type = "number" class="input" id = "pz"/>
				<br/>
				<div class="title">Rotation</div>
				x:<input value = "0" type = "number" class="input" id = "rx" />
				y:<input value = "0" type = "number" class="input" id = "ry"/>
				z:<input value = "0" type = "number" class="input" id = "rz"/>
				<br/>
				<div class="title">Scale</div>
				x:<input value = "0" type = "number" class="input" id = "sx" />
				y:<input value = "0" type = "number" class="input" id = "sy"/>
				z:<input value = "0" type = "number" class="input" id = "sz"/>
				<br/>
				</fieldset>
				</div>
				<div class="material">
				<fieldset>
			    <legend>Material</legend>
				<div class="title">Ks</div>
				r:<input value = "0" type = "number" class="input" id = "ksr" />
				g:<input value = "0" type = "number" class="input" id = "ksg" />
				b:<input value = "0" type = "number" class="input" id = "ksb" />

				<div class="title">Ka</div>
				r:<input value = "0" type = "number" class="input" id = "kar" />
				g:<input value = "0" type = "number" class="input" id = "kag" />
				b:<input value = "0" type = "number" class="input" id = "kab" />

				<div class="title">Kd</div>
				r:<input value = "0" type = "number" class="input" id = "kdr" />
				g:<input value = "0" type = "number" class="input" id = "kdg" />
				b:<input value = "0" type = "number" class="input" id = "kdb" />
				<br/>
				<span class="title">S:</span>
				&nbsp;&nbsp;<input value = "0" type = "number" class="input" id = "ns" />
				<br/>
				<span class="title">Shader:</span>
				<select id="shaderType">
				  <option value="phong">Phong</option>
				  <option value="bump">Bump</option>
				  <option value="skybox">Skybox</option>
				  <option value="reflection">Reflection</option>
				  <option value="hatching">Hatching</option>
				</select>
				<br/>
				<span class="title">Texture:</span>
				<span id="textureName">No Texture</span><br/>
				<input type="file" id="textureFile"/>
				<input type="button" value = "Set Texture" id="textureButton"/>
				</fieldset>
				</div>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>
